<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>权限管理 - 线框图原型</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      background: #f6f7fb;
      font-family: Arial, sans-serif;
    }
    .main {
      max-width: 1200px;
      margin: 0 auto;
      padding: 32px 0 0 0;
    }
    .header {
      background: linear-gradient(90deg, #a084ee 0%, #6a9cfb 100%);
      color: #fff;
      border-radius: 18px;
      padding: 32px 32px 24px 32px;
      margin-bottom: 24px;
      font-size: 2rem;
      font-weight: bold;
      position: relative;
    }
    .header-desc {
      font-size: 1.1rem;
      font-weight: normal;
      margin-top: 12px;
      color: #e0e0e0;
    }
    .action-bar {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
      margin-bottom: 16px;
    }
    .btn {
      background: #fff;
      color: #6a9cfb;
      border: 1.5px solid #a084ee;
      border-radius: 8px;
      padding: 8px 18px;
      font-size: 1rem;
      font-weight: bold;
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
    }
    .btn-primary {
      background: #6a9cfb;
      color: #fff;
      border: none;
    }
    .filter-section {
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(80, 60, 180, 0.06);
      padding: 24px;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .filter-input, .filter-select {
      padding: 8px 12px;
      border: 1px solid #e0e0e0;
      border-radius: 6px;
      font-size: 1rem;
      background: #f6f7fb;
    }
    .tree-section {
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(80, 60, 180, 0.06);
      padding: 24px;
      margin-bottom: 24px;
    }
    .tree-header {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 12px;
    }
    .tree-title {
      font-size: 1.1rem;
      font-weight: bold;
    }
    .tree-actions {
      margin-left: auto;
      display: flex;
      gap: 8px;
    }
    .tree-list {
      margin-top: 8px;
      padding-left: 0;
      list-style: none;
    }
    .tree-item {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 6px;
    }
    .tree-label {
      background: #f3f0fa;
      color: #a084ee;
      border-radius: 6px;
      padding: 2px 10px;
      font-size: 0.98rem;
      margin-left: 4px;
    }
  </style>
</head>
<body>
  <div class="main">
    <div class="header">
      权限管理
      <div class="header-desc">管理系统权限，包括菜单、功能和数据权限的配置</div>
      <div class="action-bar">
        <button class="btn">刷新权限</button>
        <button class="btn">批量删除</button>
        <button class="btn btn-primary">+ 新增权限</button>
      </div>
    </div>
    <div class="filter-section">
      <input class="filter-input" type="text" placeholder="权限名称" />
      <input class="filter-input" type="text" placeholder="权限编码" />
      <select class="filter-select">
        <option>权限状态</option>
      </select>
      <button class="btn btn-primary">搜索</button>
      <button class="btn">重置</button>
      <div style="margin-left:auto; color:#888; font-size:0.98rem;">共 46 条记录</div>
    </div>
    <div class="tree-section">
      <div class="tree-header">
        <div class="tree-title">权限构架结构 <span style="color:#3ecf8e; font-size:0.98rem;">46 个节点</span></div>
        <div class="tree-actions">
          <button class="btn">+ 展开全部</button>
          <button class="btn">- 收起全部</button>
          <button class="btn">刷新</button>
        </div>
      </div>
      <ul class="tree-list">
        <li class="tree-item"><input type="checkbox" /> 删除用户 <span class="tree-label">user.delete</span></li>
        <li class="tree-item"><input type="checkbox" /> 编辑模板 <span class="tree-label">template.edit</span></li>
        <li class="tree-item"><input type="checkbox" /> 创建新菜单 <span class="tree-label">menu.create</span></li>
        <li class="tree-item"><input type="checkbox" /> 编辑菜单 <span class="tree-label">menu.update</span></li>
        <li class="tree-item"><input type="checkbox" /> 查看报警流 <span class="tree-label">log.search</span></li>
        <li class="tree-item"><input type="checkbox" /> 告警管理 <span class="tree-label">monitoring.alerts</span></li>
        <li class="tree-item"><input type="checkbox" /> 重置用户密码 <span class="tree-label">user.resetPassword</span></li>
        <li class="tree-item"><input type="checkbox" /> 编辑组件 <span class="tree-label">component.manage</span></li>
        <li class="tree-item"><input type="checkbox" /> 分配角色权限 <span class="tree-label">role.assign</span></li>
        <li class="tree-item"><input type="checkbox" /> 编辑用户信息 <span class="tree-label">user.update</span></li>
        <li class="tree-item"><input type="checkbox" /> 编辑角色信息 <span class="tree-label">role.update</span></li>
        <li class="tree-item"><input type="checkbox" /> 实时数据仪表盘 <span class="tree-label">dashboard.realtime</span></li>
        <li class="tree-item"><input type="checkbox" /> 创建角色 <span class="tree-label">role.create</span></li>
        <li class="tree-item"><input type="checkbox" /> 个人资料查看 <span class="tree-label">profile.view</span></li>
        <li class="tree-item"><input type="checkbox" /> 查看权限列表 <span class="tree-label">permission.view</span></li>
        <li class="tree-item"><input type="checkbox" /> 删除角色 <span class="tree-label">role.delete</span></li>
      </ul>
    </div>
  </div>
</body>
</html>
